<template>
  <t-aside v-if="store.showSidebar">
    <t-menu
      theme="light"
      :value="selectedKeys"
      :default-expanded="openKeys"
      :width="['200px', '80px']"
      :collapsed="collapsed"
    >
      <template #logo>
        <template v-if="store.showSidebarLogo">
          <img
            src="../../assets/images/img/logo.png"
            alt=""
            :class="{ collapsed }"
          />
          <div v-show="!collapsed">
            <h2 class="tc">Lee</h2>
          </div>
        </template>
      </template>
      <template v-for="(item, index) in routers" :key="index">
          <template v-if="item.children && item.children.length > 0">
            <menuList :menu-info="item" />
          </template>
          <template v-else>
            <router-link :to="item.path">
              <t-menu-item :value="item.path">
                <template #icon>
                  <component :is="item.meta.icon" />
                </template>
                <span>{{ item.meta.title }}</span>
              </t-menu-item>
            </router-link>
          </template>
      </template>
    </t-menu>
  </t-aside>
</template>
<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useSystemStore } from '@/store/modules/system';
import { useRoute } from 'vue-router';
import menuList from './MenuList.vue';
import { useAuthStore } from '@/store/modules/auth';
const authStore = useAuthStore();
let store = useSystemStore();
let { collapsed } = storeToRefs(store);
let route = useRoute();
let current_page_title = computed(() => route.meta.activeMenu ? route.meta.activeMenu : route.path);
let selectedKeys = ref(current_page_title.value);
watch(
  () => route.path,
  () => {
    openKeys = findParentPath(routers.value);
    selectedKeys.value = current_page_title.value;
  },
);
const routers = computed(() => authStore.showMenuListGet);

const findParentPath = (list: any, path: string[] = [],paths:string[] = []) => {
 list.forEach((res: any) => {
  let newPath = [...path,res.path]
      if (res.children && res.children.length > 0) {
        findParentPath(res.children, newPath,paths)
        if (res.children.some((child:any)=>child.path == route.path)) {
          paths.push(...newPath)
        }
      }
  })
  return paths
}
let openKeys = findParentPath(routers.value);
</script>
<style lang="scss" scoped>
:deep(.t-default-menu) {
  height: auto !important;
}
.t-default-menu .t-menu__item:first-child,
.t-default-menu .t-menu__item:last-child {
  margin-top: 4px !important;
}
</style>
